<style lang="less">
  .handle-bar {
    position: relative;
    z-index: 1;
    background: #fff;
    box-shadow: 0rpx -6rpx 12rpx 0rpx rgba(0,0,0,0.16);
    .handle-btns {
      border-top: 2rpx solid #f2f2f2;
      height: 88rpx;
      color: rgba(0, 0, 0, 0.85);
      .handle-btn {
        height: 100%;
        line-height: 88rpx;
        padding: 0 30rpx;
        font-size: 31rpx;
      }
      .handle-text {
        text-align: center;
        font-size: 26rpx;
      }
    }
  }
</style>

<template>
  <view class="handle-bar" :class="isIphoneX ? 'iphoneX-bottom' : ''">
    <slot />
    <view class="handle-btns flex just-sb align-center">
      <view class="handle-btn iconfont icon-false fw700" @click="close"></view>
      <view class="handle-text flex-1">{{ title }}</view>
      <view class="handle-btn iconfont icon-true fw700" @click="submit"></view>
    </view>
  </view>
</template>

<script>
import systemMixin from '@/mixin/system'
/**
 * 操作栏
 */
export default {
  name: 'HandleBar',
  mixins: [systemMixin],
  props: {
    title: {
      type: String,
      default: ''
    },
  },
  methods: {
    close() {
      this.$emit('close')
    },
    submit() {
      this.$emit('submit')
    }
  }
}
</script>